<!--
 * @Author: your name
 * @Date: 2019-11-19 09:54:45
 * @LastEditTime: 2019-11-22 17:01:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \YouYouFo\you-you-go\src\views\pictureShare\PicShareList.vue
 -->
<template>
  <div>
    <!-- <p>图片分享</p>
    <router-link to="/pictureDetail">跳转到图片详情</router-link>-->
    <!-- tab栏 标签栏滚动-->
    <van-tabs>
      <van-tab v-for="(item,index) in titleObj" :key="index">
        <div slot="title">
          <span @click="getPictureId(item.id)">{{item.title}}</span>
        </div>
      </van-tab>
    </van-tabs>
    <!-- main主体布局 -->
    <ul class="main">
      <router-link to="/pictureDetail">
        <li v-for="(item,index) in allpictureList" :key="index">
          <div class="color">
            <p>{{item.seo_title}}</p>
            <span>{{item.seo_description}}</span>
          </div>
          <img :src="item.img_url" alt @click="getIndex(index,item.id)" />
        </li>
      </router-link>
    </ul>
  </div>
</template>
<script>
import { getImages, getImageCategory } from '@/api/index.js'
export default {
  data() {
    return {
      // 获取图片列表页面上面的分类信息获取
      titleObj: [],
      // 获取全部图片list
      allpictureList: [],
      // 存储图片路径
      picturePath: []
    }
  },
  created() {
    this.getPicture()
    this.getPictureId(0)
  },
  methods: {
    // 获取全部图片数组
    async getPictureId(id) {
      // console.log(id)
      const { data: res } = await getImages(id)
      console.log(res, 555555555)
      this.allpictureList = res.message
      // console.log(this.allpictureList,444444444)
    },
    // 获取图片列表数据
    async getPicture() {
      const { data: res } = await getImageCategory()
      console.log(res, 555555555)
      this.titleObj = res.message
      console.log(this.titleObj, 888888888) //12个
      this.titleObj.unshift({
        id: 0,
        title: '全部'
      })
    },
    // 存储点击的索引和id
    getIndex(index, id) {
      window.sessionStorage.setItem('index', index)
      window.sessionStorage.setItem('ID', id)
    }
  }
}
</script>
<style lang="less" scoped>
.main {
  // width: 200px;
  // height: 200px;
  // background-color: pink;
  li {
    // width: 100%;
    height: 350px;
    background-color: pink;
    margin: 10px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.color {
  width: 100%;
  // height: 80px;
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  bottom: 0;
  padding: 5px;
  color: #fff;
  line-height: 20px;
  p {
    margin-bottom: 2px;
  }
}
</style>
